<template>
    <div class="editCoupon">
        <header>新增优惠券</header>
        <div class="contents">
            <div class="couponName common">
                <p style="width:200px;">优惠券名称：</p>
                <el-input v-model.trim="input1" placeholder="给优惠券请个名字"></el-input>
            </div>
            <div class="couponType common">
                <p>优惠券类型：</p>
                <el-select v-model="value1" placeholder="请选择" style="width:300px;">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </div>
            <div class="couponDate common">
                <p>优惠券有效期：</p>
                <el-input style="width:130px;" v-model.trim="input2" placeholder="说明"></el-input>
                <span style="margin-left:20px;">天</span>
            </div>
            <div class="payFee common">
                <p>兑换条件：</p>
                <el-input style="width:130px;" v-model.trim="input8" placeholder="说明"></el-input>
                <span style="margin-left:20px;">分</span>
            </div>
            <div class="payFee common">
                <p>支付金额/可抵用金额：</p>
                <el-input style="width:130px;" v-model.trim="input7" placeholder="说明"></el-input>
                <span style="margin-left:20px;">元</span>
            </div>
            <div class="sumLimit common">
                <p>满抵金额限制：</p>
                <div class="explain2">
                    <el-input style="width:130px;margin-top:48px;" v-model.trim="input3" placeholder="说明"></el-input>
                    <p>消费满该限制方可使用</p>
                </div>
                <span style="margin-left:-14px;">元</span>
            </div>
            <div class="useRange common">
                <p>适用范围：</p>
                <div class="selectedTags" v-if="tags.length>0">
                    <el-tag v-for="(tag,index) in tags" :key="tag.index" closable @close="handleClose(tag)" :type="tag.type"> {{tag.SUBJECT}} </el-tag>
                </div>
                <el-button @click.native="selectRange" style="margin-left:30px;">选择范围</el-button>
            </div>
            <div class="explain common">
                <p>说明：</p>
                <el-input style="width:500px;" v-model.trim="input5" placeholder="说明"></el-input>
            </div>
            <div class="buttons common">
                <el-button type="danger" style="background:#e7251a;" @click.native="submits">提交</el-button>
                <el-button @click.native="cancels">取消</el-button>
            </div>
        </div>
        <!--选择适用范围-->
        <el-dialog title="选择适用范围" :visible.sync="dialogs" width="75%">
            <div class="dialog_box">
                <div class="condition" style="display:none;">
                    <p>所属门店：</p>
                    <el-select v-model="value3" placeholder="请选择" style="width:300px;">
                        <el-option v-for="item in options3" :key="item.COMP_ID" :label="item.SHOP_NAME" :value="item.COMP_ID"> </el-option>
                    </el-select>
                    <el-button type="danger" style="margin:0 0 0 45px;background:#e7251a;" @click.native="querys">查询</el-button>
                    <el-button @click.native="resets">重置</el-button>
                </div>
                <div v-if="!noData" class="all_datas" v-loading="loading">
                    <div class="checkbox_explain" v-for="items in rangeDatas">
                        <p>{{items.CLASS}}：</p>
                        <div class="all_checkbox" v-for="(item,ind) in items.RANGEARR">
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox :label="item" :key="item.SUBJECT">{{item.SUBJECT}}</el-checkbox>
                                </el-checkbox-group?>
                        </div>
                    </div>
                </div>
                <div v-if="noData" class="no_data">暂无数据</div>
                <div class="two_btns">
                    <el-button @click.native="cancel2">取消</el-button>
                    <el-button type="primary" @click.native="ensures">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import qs from 'qs'
    import { setCookie,getCookie } from '@/assets/js/cookie'
    import { selectionRange } from '@/api/coupon'
    import { get4SCafeShopList } from '@/api/market'
    import { getCashVolumeRecordById } from '@/api/coupon';
    import dateSelect from '@/assets/js/date_time_picker.js' //日期选择器数据封装
    export default {
        name: 'editCoupon',
        data() {
            return {
                userID: '', //用户id    	
                input1: '', //优惠券名称
                value1: '', //优惠券类型
                options1: [{
                    value: 1,
                    label: '满减劵'
                }, {
                    value: 2,
                    label: '兑换劵'
                }, {
                    value: 3,
                    label: '服务券'
                }, {
                    value: 4,
                    label: 'N元劵'
                }, {
                    value: 5,
                    label: '折扣劵'
                }],
                value2: [], //优惠券有效日期
                pickerOptions2: dateSelect,
                input2: '', //支付金额
                input3: '', //满抵金额限制        
                tags: [], //适用范围        
                input5: '', //说明
                dialogs: false, //是否显示选择适用范围
                value3: '', //所属门店
                options3: [], //门店
                editDatas: '', //编辑商品的详细信息
                rangeDatas: [], //券使用范围数据
                checkList: [], //已选checkbox
                loading: true,
                noData: false, //是否没数据        
                input7: '', //有效期
                input8: '', //兑换条件
            }
        },
        created() {
        	//离开页面提醒
        	window.onbeforeunload = function(e) {
                var e = window.event || e;
                e.returnValue = ("在新增或编辑时，关闭选项卡将导致数据无法保存");
            }
            this.userID = getCookie('userId');
            //所有4s门店
            get4SCafeShopList().then(res => {
                if(res.data.STATUS_CODE === 1) {
                    this.options3 = res.data.SHOP_LIST;
                }
            })            
        },
        methods: {
            handleClose(tag) {
                this.tags.splice(this.tags.indexOf(tag), 1);
            },
            getR() {
                let obj = {};
                obj.USER_ID = this.userID;
                obj.CATEGORY = this.value1;
                selectionRange(obj).then(res => {
                    this.loading = true;
                    this.noData = false;
                    if(res.data.STATUS_CODE === 1) {
                        this.loading = false;
                        if(res.data.SELECTIONARR.length === 0) {
                            this.noData = true;
                            return false;
                        }
                        this.rangeDatas = res.data.SELECTIONARR;
                    }
                })
            },
            //选择范围
            selectRange() {
                if(this.value1 == '') {
                    this.$alert('请选择优惠券类型', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                this.dialogs = true;
                this.getR();
            },
            //确定
            ensures() {
            	//console.log(this.checkList);            	
                this.tags = this.checkList;
                this.dialogs = false;
            },
            //取消
            cancel2() {
                this.checkList = [];
                this.dialogs = false;
            },
            //提交
            submits() {
                //console.log(this.tags);return;
                let arrs = [];
                this.tags.forEach(function(v) {
                    arrs.push(v.SUBJECT);
                })
                if(this.input1 == '') {
                    this.$alert('请输入优惠券名称', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.value1 == '') {
                    this.$alert('请选择优惠券类型', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.input2 == '') {
                    this.$alert('请输入可抵用金额', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.input3 == '') {
                    this.$alert('请输入满抵金额限制', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.input7 == '') {
                    this.$alert('请输入优惠券有效期', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.input8 == '') {
                    this.$alert('请输入兑换条件', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.tags.length === 0) {
                    this.$alert('请选择适用范围', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                let obj = {};                
                obj.SUBJECT = this.input1;
                obj.CATEGORY = this.value1;
                obj.AVAILDAYS = this.input2;
                obj.INTEGRAL = this.input8;
                obj.AMOUNT = this.input7;
                obj.USABLEPRICE = this.input3;
                obj.USERANGE = arrs.join();
                obj.CASHVOLRMK = this.input5;
                //console.log(obj);return;                
                this.$axiosPost('/4SCAFE/PointExchange/savePointExchange.action', obj).then(res => {
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        this.$message.success('添加成功');
                        setTimeout(() => this.$router.push({
                            path: '/functions/integral'
                        }), 1000);
                    }
                })
            },
            //取消
            cancels() {
                this.$confirm('此操作将不会保存信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push({
                        path: '/functions/integral'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            //查询
            querys() {
                if(this.value3) {
                    this.rangeDatas = [];
                }
                let obj = {};
                this.value3 ? obj.COMPID = this.value3 : null;
                obj.CATEGORY = this.value1;
                selectionRange(obj).then(res => {
                    this.loading = true;
                    this.noData = false;
                    if(res.data.STATUS_CODE === 1) {
                        this.loading = false;
                        if(res.data.SELECTIONARR.length === 0) {
                            this.noData = true;
                            return false;
                        }
                        this.rangeDatas = res.data.SELECTIONARR;
                    }
                })
            },
            //重置
            resets() {
                this.value3 = '';
            },
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .editCoupon {
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .contents {
            height: 800px;
            background: #fff;
            margin: 30px;
            padding-top: 60px;
            display: flex;
            flex-flow: column;
            align-items: center;
            p {
                white-space: nowrap;
                width: 165px;
                text-align: right;
            }
            .common {
                width: 50%;
                margin: 26px auto 0 auto;
                display: flex;
                align-items: center;
            }
            .sumLimit {
                margin-top: -20px;
                .explain2 {
                    p {
                        font-size: 14px;
                        color: #a8a8a5;
                        text-align: left;
                    }
                }
            }
            .useRange {
                margin-top: 10px;
                .selectedTags {
                    border: 1px solid #dcdfe6;
                    padding: 8px;
                }
            }
            .buttons {
                width: 28%;
                display: flex;
            }
        }
        .dialog_box {
            width: 100%;
            border-top: 1px solid #f0f0f0;
            .condition {
                display: flex;
                align-items: center;
                padding: 25px 0 25px 25px;
                p {
                    color: #000;
                }
            }
            .all_datas {
                .checkbox_explain {
                    display: flex;
                    flex-flow: wrap;
                    align-items: center;
                    padding: 30px 30px 0 30px;
                    border-bottom: 1px solid #f0f0f0;
                    p {
                        width: 0;
                        white-space: nowrap;
                        color: #000;
                        margin-top: -10px;
                    }
                    .all_checkbox {
                        /* 主要控制这个样式 */
                        margin: 0 0 22px 70px;
                        width: 120px;
                    }
                }
            }
            .no_data {
                text-align: center;
                margin-top: 30px;
            }
            .two_btns {
                padding: 10px 50px 0 0;
                display: flex;
                justify-content: flex-end;
            }
        }
    }
    .el-dialog__body {
        padding: 0!important;
    }
</style>